<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>$!{i18n.get("system")}$!{i18n.get("mng")}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  #parse('/headFiles.html')
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <div class="layui-form-item">
      	<div class="layui-inline">
          <label class="layui-form-label">国家</label>
          <div class="layui-input-inline">
            <input type="hidden" name="countryId" value="$!{country.id}"/>
            <input type="text" autocomplete="off" class="layui-input" value="$!{country.name}" readonly>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">地区名称</label>
          <div class="layui-input-inline">
            <input type="text" name="name" placeholder="$!{i18n.get('Fuzzy')}" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">上级地区ID</label>
          <div class="layui-input-inline">
            <input type="text" name="parentId" placeholder="$!{i18n.get('Fuzzy')}" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">地区类型</label>
          <div class="layui-input-inline">
            <select name="type">
              <option value="">$!{i18n.get("all")}</option>
              #foreach($item in $typeList)
              <option value="$!{item.index()}">$!{item.note()}</option>
              #end
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-list-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="layui-card-body">
      <div style="padding-bottom: 10px;">
        <button class="layui-btn LAY-btn-fun" data-type="add">新增省份</button>
        <button class="layui-btn LAY-btn-fun layui-btn-normal" id="uploadExcel">导入数据</button>
        <button class="layui-btn LAY-btn-fun layui-btn-normal" id="uploadJson">导入微信JSON</button>
        <button class="layui-btn LAY-btn-fun layui-btn-normal" data-type="exportToExcel">导出数据</button>
		<button class="layui-btn LAY-btn-fun layui-btn-danger" data-type="batchdel">批量删除</button>
      </div>
      <div id="tablePanel"><table id="LAY-list" lay-filter="LAY-list"></table></div>
      <script type="text/html" id="table-operate">
          	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
			<a class="layui-btn layui-btn-xs" lay-event="addChild">新增下级</a>
          	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
  </div>
</div>
<form action="$!{webRoot}/config/country/area/exportExcel.html" id="exportExcelForm" method="post">
  <input type="hidden" name="countryId" value="$!{country.id}"/>
</form>
#parse('/footFiles.html')
<script type="text/javascript">
  layui.config({
    base: '$!{webRoot}/assets/layuiadmin/'
  }).extend({
    index: 'lib/index'
  }).use(['index','admin','form','table','upload'], function(){
    var $ = layui.$,table = layui.table,form = layui.form,admin = layui.admin,upload = layui.upload;
    
    table.render({
    	id:'LAY-list'
      ,elem: '#LAY-list'
      ,url: '$!{webRoot}/config/country/area/list.data'
      ,where:{countryId:'$!{country.id}'}
   	  ,method: 'post'
	  ,parseData: function(res){
   	    return {
   	      "code": res.code,
   	      "msg": res.msg,
   	      "count": res.body.total,
   	      "data": res.body.data
   	    };
	  }
      ,response: {statusCode: 200}
      ,cols: [[
    	  {type:'checkbox'}
          ,{field:'id', title: '地区ID'}
          ,{field:'name', title: '地区名称'}
          ,{field:'fullName', title: '地区全称'}
          ,{field:'typeName', title: '地区类型'}
          ,{field:'priority', title: '显示优先级'}
          ,{title: '操作',toolbar: '#table-operate',width:200}
      ]]
      ,page: true
      ,limit:20
      ,height: 'full-220'
    });
  
  	//监听搜索
    form.on('submit(LAY-list-search)', function(data){
      var field = data.field;
      //执行重载
      table.reload('LAY-list', {
        where: field
        ,page: {curr:1}
      });
    });
  	
    var active = {
    	add:function(){
    		layer.open({
   	          type: 2
   	          ,title: '新增省份'
   	          ,content: "$!{webRoot}/config/country/area/add.html?countryId=${country.id}"
   	          ,maxmin: false
   	          ,area: ['550px', '500px']
   	          ,btn: ['确定','取消']
   	          ,yes: function(index, layero){
   	        	var iframeWindow = window['layui-layer-iframe'+ index]
	               ,submit = layero.find('iframe').contents().find("#LAY-form-submit");
	               iframeWindow.layui.form.on('submit(LAY-form-submit)', function(data){
	                 var field = data.field; //获取提交的字段
	               	$.ajax({
			    		type: "post",
			            url: "$!{webRoot}/config/country/area/add.do",
			            data:field,
						dataType:"json",
						success:function(res){
							if(res.code == 200){
								table.reload('LAY-list'); //数据刷新
		                    	layer.close(index); //关闭弹层
							}else{
								layer.msg(res.msg,{icon: 2});
							}
						}
			        });
	              });  
	              submit.trigger('click');
   	          }
   	        });
    	}
    	,update:function(obj){
    		layer.open({
  	           type: 2
  	           ,title: '修改地区信息'
  	           ,content: '$!{webRoot}/config/country/area/update.html?id='+obj.data.id
  	           ,maxmin: false
  	           ,area: ['550px', '500px']
  	           ,btn: ['确定','取消']
  	           ,yes: function(index, layero){
  	         	  var iframeWindow = window['layui-layer-iframe'+ index]
  	               ,submit = layero.find('iframe').contents().find("#LAY-form-update");
  	               iframeWindow.layui.form.on('submit(LAY-form-update)', function(data){
  	               		var field = data.field; //获取提交的字段
  	               		$.ajax({
	  			    		type: "post",
	  			            url: "$!{webRoot}/config/country/area/update.do",
	  			            data:field,
	  						dataType:"json",
	  						success:function(res){
	  							if(res.code == 200){
	  								table.reload('LAY-list'); //数据刷新
	  		                    	layer.close(index); //关闭弹层
	  							}else{
	  								layer.msg(res.msg,{icon: 2});
	  							}
	  						}
	  			        });
  	              });  
  	              submit.trigger('click');
  	           }
  	         });
    	}
    	,addChild:function(obj){
    		layer.open({
   	          type: 2
   	          ,title: '新增地区信息'
   	          ,content: "$!{webRoot}/config/country/area/add.html?countryId=${country.id}&parentId="+obj.data.id
   	          ,maxmin: false
   	          ,area: ['550px', '500px']
   	          ,btn: ['确定','取消']
   	          ,yes: function(index, layero){
   	        	var iframeWindow = window['layui-layer-iframe'+ index]
	               ,submit = layero.find('iframe').contents().find("#LAY-form-submit");
	               iframeWindow.layui.form.on('submit(LAY-form-submit)', function(data){
	                 var field = data.field; //获取提交的字段
	               	$.ajax({
			    		type: "post",
			            url: "$!{webRoot}/config/country/area/add.do",
			            data:field,
						dataType:"json",
						success:function(res){
							if(res.code == 200){
								table.reload('LAY-list'); //数据刷新
		                    	layer.close(index); //关闭弹层
							}else{
								layer.msg(res.msg,{icon: 2});
							}
						}
			        });
	              });  
	              submit.trigger('click');
   	          }
   	        });
    	}
    	,del:function(obj){
    		layer.confirm('确定要删除该地区信息吗？', function(index){
            	$.ajax({
              	  type: "post",
                  url: "$!{webRoot}/config/country/area/del.do",
                  data:{id:obj.data.id},
          		  dataType:"json",
          		  success:function(res){
          			if(res.code == 200){
          				table.reload('LAY-list');
          			}else{
          				layer.msg(res.msg,{icon: 5});
          			}
          		  }
                });
            	layer.close(index);
            });
    	}
      	,batchdel: function(){
        	var checkStatus = table.checkStatus('LAY-list')
        	,checkData = checkStatus.data; //得到选中的数据
	        if(checkData.length === 0){
	          return layer.msg('请选择要删除的地区');
	        }
        	let ids = [];
        	for(let i=0;i<checkData.length;i++){
        		ids[i] = checkData[i].id;
        	}
      
	        layer.confirm('确定要删除这些地区信息吗？', function(index) {
	        	$.ajax({
              	  type: "post",
                  url: "$!{webRoot}/config/country/area/batchdel.do",
                  data:{ids:ids.join(',')},
          		  dataType:"json",
          		  success:function(res){
          			if(res.code == 200){
          				table.reload('LAY-list');
          			}else{
          				layer.msg(res.msg,{icon: 5});
          			}
          		  }
                });
	        	layer.close(index);
	        });
      	}
	    ,exportToExcel: function(){ //导出
	    	layer.confirm('确定要导出这些数据吗？', function(index){
	   			$('#exportExcelForm').submit();
	        	layer.close(index);
	        });
	    }
    };

    //导入
    upload.render({
      elem: '#uploadExcel' //绑定元素
      ,url: '$!{webRoot}/config/country/area/uploadExcel.do' //上传接口
      ,headers:{countryId: '$!{country.id}'}
      ,before: function(obj){
	       layer.load(); //上传loading
      }
      ,done: function(res){
    		if(res.code == 200){
    			 table.reload('LAY-list'); //数据刷新	
    			 layer.msg(res.msg,{icon:1});
    		}else{
    			 layer.msg(res.msg,{icon: 5});
    		}
        //上传完毕回调
       
        layer.closeAll('loading'); //关闭loading
       
      },error: function(res){
        //请求异常回调
        table.reload('LAY-list'); //数据刷新
        layer.closeAll('loading'); //关闭loading
        layer.msg(res.msg,{icon: 5});
      }
      ,accept: 'file'
    });

    upload.render({
      elem: '#uploadJson' //绑定元素
      ,url: '$!{webRoot}/config/country/area/uploadJson.do' //上传接口
      ,headers:{countryId: '$!{country.id}'}
      ,before: function(obj){
        layer.load(); //上传loading
      }
      ,done: function(res){
        if(res.code == 200){
          table.reload('LAY-list'); //数据刷新
          layer.msg(res.msg,{icon:1});
        }else{
          layer.msg(res.msg,{icon: 5});
        }
        //上传完毕回调

        layer.closeAll('loading'); //关闭loading

      },error: function(res){
        //请求异常回调
        table.reload('LAY-list'); //数据刷新
        layer.closeAll('loading'); //关闭loading
        layer.msg(res.msg,{icon: 5});
      }
      ,accept: 'file'
    });


    $('.layui-btn.LAY-btn-fun').on('click', function(){
    	let type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    
    table.on('tool(LAY-list)', function(obj){
      	let type = obj.event ;
      	active[type] ? active[type].call(this,obj) : '';
    });

  });
</script>
</body>
</html>
